import React, { Component } from 'react'

export default class Test extends Component {
  constructor(props) {
    super(props)
    console.log(this.props)
  }
  render() {
    // console.log(this.props) // {xxx: [1,2,3]}
    // this.props.yyy = 2
    this.props.xxx.push(9) // 注意: 如果props的数据是复杂数据类型,直接修改复杂数据里面的值,props只读检查时不会发现的
    return (
      <div>
        {this.props.xxx}
        <hr />
        {/* 渲染一个jsx标签, 说白了就是渲染一个虚拟dom */}
        {this.props.ele}

        {/* 渲染一个组件 */}
        <this.props.eleType></this.props.eleType>

        {/* 渲染一个组件实例. 因为一个组件实例,相当于一个虚拟dom */}
        {this.props.eleInstance}
      </div>
    )
  }
}

// import React from 'react'

// export default function Test(props) {
//   console.log(props)
//   return (
//     <div>
//       Test, {props.yyy},{props.zzz}
//     </div>
//   )
// }
